<template>
  <div class="es-screen-header">
    <div class="header-left">
      <h1 class="es-screen-logo">
				<span>csu大学</span>
				<div class="es-screen-time">
					<span>{{ currentTime }}</span>
					<span>{{ currentDate }}</span>
				</div>
			</h1>
		</div>
		<div class="es-screen-header-title">{{ store.title }}</div>
		<div class="header-right">
			<!--
			<img :src="infoIcon" @click="handleInfoClick" />
			<img :src="userIcon" />
			-->
			<span class="console-text" @click="$router.push(DEFAULT_HOME_PATH)">控制台</span>
			<span class="user-name">{{ userName }}</span>
			<span>
				<img class="theme-change" :src="icon" @click="handleChangeTheme" />
			</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from "vue";
import dayjs from "dayjs";
import { useScreenStore } from "#/store";
import darkIcon from "#/views/screen/assets/images/screen/qiehuan_dark.png";
import lightIcon from "#/views/screen/assets/images/screen/qiehuan_light.png";
import infoIcon from "#/views/screen/assets/images/screen/info_icon.png"; // 假设这是信息栏图标路径
import userIcon from "#/views/screen/assets/images/screen/user_icon.png"; // 假设这是用户图标路径

import { DEFAULT_HOME_PATH } from '@vben/constants';

const store = useScreenStore();

// 计算属性用于决定图标路径
const icon = computed(() => (store.theme === "dark" ? darkIcon : lightIcon));

const currentTime = ref("");
const currentDate = ref(dayjs().format("YYYY-MM-DD")); // 初始化日期
const timeId = ref();

// 切换主题
function handleChangeTheme() {
	store.$patch({
		theme: store.theme === "dark" ? "light" : "dark",
	});
}

// 更新时间
function updateTime() {
	currentTime.value = dayjs().format("HH:mm:ss");
}

// 开始计时器
function startTime() {
	timeId.value = setInterval(() => {
		updateTime();
	}, 1000);
}

// 信息栏点击事件处理
function handleInfoClick() {
	// 这里可以添加跳转逻辑
	console.log("Information clicked");
}

// 用户名
const userName = ref("User Name"); // 可以根据实际情况动态设置用户名

// 在组件卸载时清除计时器
onBeforeUnmount(() => {
	clearInterval(timeId.value);
});

startTime(); // 启动时间更新
</script>

<style lang="scss" scoped>
.es-screen-header {
	position: relative;
	width: 100%;
	height: var(--es-header-height);
	background-image: url("@/assets/images/screen/header_border_dark.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px; /* 内边距 */
	animation: fade 3s;
	&-title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 487px;
		height: var(--es-header-height);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 7px;
		text-shadow: 0px 2px 20px rgba(222, 171, 155, 0.6);
	}
	.es-screen-logo {
		display: flex;
		align-items: center;
		height: calc(var(--es-header-height) - 20px);
	}
	.es-screen-time {
		margin: 35px;
		span {
			margin: 10px;
			font-size: large;
		}
	}
	&-right {
		display: flex;
		align-items: center;
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-80%);
		gap: 16px;
		img {
			width: 30px;
			margin-right: 16px;
			cursor: pointer;
			transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			&:hover {
				transform: scale(1.2);
			}
		}
		.console-text,
		.user-name {
			font-size: 18px;
			margin-left: 8px;
		}
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>
